.login-container {
	position: relative;
	overflow: hidden;
	.dark {
		position: absolute;
		top: 4.5%;
		right: 3.2%;
	}
	.sys-title {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		height: 80px;
		padding-right: 40px;
		font-size: 30px;
		line-height: 80px;
		color: #333333;
		text-align: right;
		.logo {
			padding-top: 24px;
			img {
				height: 44px;
				margin: 10px 30px 10px 10px;
			}
		}
		.text {
			margin-top: 8px;
			font-weight: bold;
			color: var(--el-color-primary);
		}
	}
	.login-left {
		position: fixed;
		width: 100%;
		min-width: 1280px;
		height: 100%;
		img {
			width: 100%;
			height: 100%;
		}
		.child-img {
			position: absolute;
			top: 10%;
			width: 80%;
			height: 85%;
			.master-img {
				position: absolute;
				top: 15%;
				left: 30%;
				z-index: 2;
				width: 55%;
			}
			.left1 {
				position: absolute;
				top: 10%;
				left: 10%;
				z-index: 1;
				width: 40%;
				animation: bounce-updown 15s linear infinite;
			}
			.bottom1 {
				position: absolute;
				bottom: 8%;
				left: 7%;
				z-index: 3;
				width: 40%;
				animation: bounce-updown 10s linear infinite;
			}
			.bottom2 {
				position: absolute;
				bottom: 2%;
				left: 40%;
				z-index: 4;
				width: 35%;
				animation: bounce-updown 25s linear infinite;
			}
			.right1 {
				position: absolute;
				top: 45%;
				right: 0%;
				z-index: 5;
				width: 40%;
				animation: bounce-updown 30s linear infinite;
			}
		}
		.img-title {
			position: absolute;
			top: 10px;
			left: 20%;
		}
	}
	.login-form {
		position: fixed;
		top: 50%;
		right: 15%;
		width: 400px;
		padding: 30px 60px;
		background: #ffffff;

		// border-radius: 10px;
		box-shadow: 2px 3px 15px rgb(0 0 0 / 20%);
		transform: translateY(-50%);
		.el-tabs__header {
			margin: 0 0 50px;
		}
		.login-panel-register {
			padding: 20px 0;
			font-size: 13px;
			color: #999999;
			.el-link {
				font-size: 13px;
			}
		}
		.login-logo {
			display: flex;
			align-items: center;
			justify-content: left;
			padding-bottom: 40px;
			.login-icon {
				width: 60px;
				height: 48px;
			}
			.logo-text {
				width: 100%;
				margin: 0;
				font-size: 24px;
				font-weight: bold;
				color: #333333;
				text-align: center;
				white-space: nowrap;
			}
		}
		.el-form-item {
			margin-bottom: 40px;
			.el-input--large .el-input__wrapper {
				padding: 5px 15px;
			}
		}
		.el-form-password {
			margin-bottom: 20px;
		}
		.login-btn {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-top: 50px;
			i {
				margin-right: 10px;
				font-size: 20px;
			}
			.el-button {
				height: 50px;
				font-size: 16px;

				// letter-spacing: 10px;
			}

			white-space: nowrap;
		}
		.ext-tips {
			position: absolute;
			left: 50%;
			width: 100%;
			color: #aaaaaa;
			text-align: center;
			transform: translateX(-50%);
		}
	}
}
.register-dialog {
	.el-dialog__header {
		display: none;
	}
	.el-dialog__body {
		padding: 0;
		margin: 0;
	}
	.register-page {
		border: 6px solid #eeeeee;
		.bg {
			width: 500px;
			background-image: url("./../../assets/images/login/bg2.png");
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100% 100%;
		}
		.form {
			flex: 1;
			padding: 30px;
			.reg-title {
				color: #333333;
				text-align: center;
				.text {
					display: block;
					width: 110px;
					margin: auto;
					font-size: 23px;
					font-weight: bold;
					line-height: 40px;
					border-bottom: 4px solid var(--el-color-primary);
				}
			}
			.el-form {
				padding: 30px;
				.el-form-item__label {
					margin-bottom: 5px;
					color: #555555;
				}
				.count-down {
					padding-right: 5px;
					font-size: 15px;
					font-weight: bold;
					color: red;
				}
			}
		}
		.footer {
			margin-top: -20px;
			.el-button.submit {
				width: 360px;
			}
			.back-login {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 15px;
				font-size: 13px;
				color: #999999;
			}
		}
	}
}
.reset-password {
	.el-form-item {
		margin-bottom: 40px;
	}
	.steps {
		position: relative;
		padding-left: 140px;
		margin-bottom: 40px;
		color: #999999;
		.step-item {
			flex: 1;
			margin: 0 30px;
			.empty-fill {
				z-index: 9;
				width: 20px;
				height: 100%;
				background: #ffffff;
			}
			.number {
				z-index: 9;
				width: 35px;
				height: 35px;
				margin-left: 30px;
				font-size: 16px;
				line-height: 35px;
				text-align: center;
				background: #ffffff;
				border: 1px solid var(--el-color-primary);
				border-radius: 50%;
			}
			.number:first-child {
				margin-left: 0;
			}
			.text {
				z-index: 9;
				padding: 0 15px;
				padding-left: 15px;
				font-size: 16px;
				background: #ffffff;
			}
		}
		.step-item.active {
			.number {
				color: #ffffff;
				background: var(--el-color-primary);
			}
			.text {
				color: var(--el-color-primary);
			}
		}
		.step-item.ok {
			.number {
				color: var(--el-color-primary);
				background: var(--el-color-primary);
				&::after {
					display: block;
					margin-top: -34px;
					font-family: iconfont !important;
					color: #ffffff;
					content: "\e879";
				}
			}
		}
		.border {
			position: absolute;
			top: 50px;
			left: 180px;
			z-index: 0;
			width: 330px;
			border-bottom: 1px solid #cccccc;
		}
	}
	.step-form {
		margin: 0 50px;
	}
}

@media only screen and (max-width: 900px) {
	body {
		.login-container {
			.login-form {
				top: 50%;
				right: auto;
				left: 50%;
				box-sizing: border-box;
				width: 100%;
				padding: 8%;
				background: none;
				transform: translate(-50%, -50%);
				.login-logo .logo-text {
					color: #eeeeee;
				}
				.el-form {
					padding: 10% 5% 90px;
					margin-top: 15%;
					background: #ffffff;
					border-radius: 10px;
					box-shadow: 10px 10px 35px #144adc;
					.el-form-item {
						margin-bottom: 30px;
						.el-input {
							height: 60px;
							.el-input__wrapper {
								align-items: flex-end;
								padding: 0 8px !important;
								border-bottom: 1px solid #cccccc;
								box-shadow: none;
								.el-input__prefix,
								.el-input__suffix {
									height: 38px;
								}
								&.is-focus {
									border: 1px solid #0070cc;
									&::after {
										position: absolute;
										top: 0;
										left: 25px;
										padding: 5px 10px;
										color: #0070cc;
										background: #ffffff;
										transition: top 1s ease;
									}
								}
							}
						}
						&.is-error .el-input__wrapper {
							border-bottom: 1px solid red;
							box-shadow: none;
						}
						.el-form-item__error {
							z-index: 9;
						}
						&:last-child {
							margin-bottom: 20px;
						}
						&.el-form-username {
							.el-input__wrapper {
								&.is-focus {
									&::after {
										top: -25px;
										content: "登录账号";
									}
								}
							}
						}
						&.el-form-password {
							.el-input__wrapper {
								&.is-focus {
									&::after {
										top: -25px;
										content: "登录密码";
									}
								}
							}
						}
					}
				}
				.login-panel-register {
					padding: 30px 0;
					color: #dddddd;
					.el-link.el-link--primary {
						color: #ffffff;
					}
				}
				.ext-tips {
					display: none;
				}
				.login-btn {
					box-sizing: border-box;
					padding: 30px;
					margin-top: 0;
					margin-top: -110px;
					.el-button {
						height: 45px;
						background: #4a80ff;
					}
				}
			}
		}
	}
}
